<template>
  <div class="coupons-list-wrapper">
    <div class="coupons-list" v-for="item in couponsList">
      <div class="img-wrapper">
        <img :src="item.hd_thumb_url" alt="">
      </div>
      <div class="info">
        <div class="goods-name">{{item.goods_name}}</div>
        <div class="discount">
          <div class="origin">
            拼单价￥
            <span>{{item.min_on_sale_group_price/100}}</span>
          </div>
          <div class="after">
            领券后￥
            <span>{{(item.min_on_sale_group_price - item.discount)/100}}</span>
          </div>
        </div>
      </div>
      <div class="button-wrapper">
        <div class="desc">
          <p style=" font-size: .12rem; font-weight: 700;  line-height: 0.4rem;">￥<span style="font-size: .28rem;font-weight: 700;">{{item.discount/100}}</span></p>
          <p>无门槛券</p>
        </div>
        <van-button style="margin-top:0.2rem;" type="danger" size="small">立即领取</van-button>
      </div>
      <div class="progress">
        <van-progress :show-pivot="false" color="#f44" :percentage="item.remain_percent" />
        <p class="text">券还剩{{item.remain_percent}}%</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["couponsList"]
};
</script>

<style lang="less" scoped>
.coupons-list {
  position: relative;
  margin: 0.08rem auto 0;
  width: 3.51rem;
  height: 1.37rem;
  background-image: url(https://pinduoduoimg.yangkeduo.com/coupons/v2/choiceness_bg_v2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .img-wrapper {
    position: absolute;
    top: 0.12rem;
    left: 0.12rem;
    width: 1rem;
    height: 1rem;
    background-color: #fafafa;
    background-size: contain;
    overflow: hidden;
    img {
      border: 0;
      max-width: 100%;
      width: auto;
      height: auto;
      vertical-align: top;
    }
  }
  .info {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    top: 0.17rem;
    left: 1.23rem;
    width: 1.17rem;
    height: 0.95rem;
    .goods-name {
      position: relative;
      width: 100%;
      font-size: 0.13rem;
      line-height: 0.2rem;
      color: #151516;
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .discount {
      position: relative;

      .origin {
        font-size: 0.12rem;
        color: #9c9c9c;
      }
      .after {
        line-height: 0.27rem;
        bottom: 0.05rem;
        color: #e02e24;
        font-size: 0.12rem;
        span {
          position: relative;
          display: inline-block;
          left: 0.01rem;
          font-size: 0.18rem;
          font-weight: 700;
        }
      }
    }
  }
  .button-wrapper {
    position: absolute;
    top: 0.08rem;
    right: 0.01rem;
    width: 0.94rem;
    height: 1.08rem;
    text-align: center;
    z-index: 10;
    .desc {
      color: #e02e24;
      font-size: 0.13rem;
    }
  }
  .progress {
    position: absolute;
    top: 1.21rem;
    left: 0.12rem;
    width: 1.63rem;
    border-radius: 0.03rem;
    .text {
      position: absolute;
      top: -0.06rem;
      left: 1.7rem;
      width: 1rem;
      font-size: 0.11rem;
      color: #58595b;
    }
  }
}
</style>

